﻿<?xml version="1.0" encoding="utf-8"?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Framework</title>

    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="ext/ext-all-debug.js"></script>
    
    <!--app specific lib-->
    
    
</head>
<body scroll="no">
</body>
<script>
var MyDataView = new Ext.DataView({
    store:new Ext.data.SimpleStore({
                        fields:[{name:'id'},{name:'value'}],
                        data:[['a','tesrt'],['b','324']]}),
    tpl:'<tpl for="."><div class="test"><input type="checkbox">{value}</input></div></tpl>',
    itemSelector:"div.test",
    height:200,
    width:220,
    });
var MutipleCombo = Ext.extend(Ext.form.ComboBox,{
    initComponent:function(){
        //this.item_cls = 
        this.tpl = '<tpl for="."><div class="x-combo-list-item"><input type="checkbox">{value}</input></div></tpl>';
        MutipleCombo.superclass.initComponent.call(this);
    },
    onSelect : function(record, index){
        var chs = this.view.getEl().query(".test_item");
        //console.log("in select " + chs[0].checked);
        if(this.fireEvent('beforeselect', this, record, index) !== false){
            this.setValue(record.data[this.valueField || this.displayField]);
            //this.collapse();
            this.fireEvent('select', this, record, index);
        }
        //console.log("in select " + chs[0].checked);
        //ch.checked = true;
    },
    setValue : function(v){
        var text = v;
        if(this.valueField){
            var r = this.findRecord(this.valueField, v);
            if(r){
                text = r.data[this.displayField];
            }else if(this.valueNotFoundText !== undefined){
                text = this.valueNotFoundText;
            }
        }
        this.lastSelectionText = text;
        if(this.hiddenField){
            this.hiddenField.value = v;
        }
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = v;
    }
});
Ext.onReady(function(){
    var panel = new Ext.form.FormPanel({
        renderTo:document.body,
        title:'test',
        items:[
            new MutipleCombo({
                    xtype:'combo',
                    displayField:'value',
                    store: new Ext.data.SimpleStore({
                        fields:[{name:'id'},{name:'value'}],
                        data:[['a','tesrt'],['b','324']]}),
                    triggerAction:'all',
                    mode:'local'
                }),
                
            {
                name:'comtest',
                xtype:'combo',
                displayField:'value',
                store: new Ext.data.SimpleStore({
                    fields:[{name:'id'},{name:'value'}],
                    data:[['a','tesrt'],['b','324']]}),
                triggerAction:'all',
                mode:'local',
                //class="'+'x-combo-list-item"
                tpl:'<tpl for="."><div class="x-combo-list-item"><input type="checkbox">{value}</input></div></tpl>'
            },
            MyDataView
        ]
    });
    panel.show();
})
</script>
</html>
